<template>
  <div class="conservator_login">
    <h4>管理员登陆</h4>
    <el-form
        label-width="75px"
        :model="loginData"
    >

      <div class="conservator_massge">
        <el-form-item label="工号">
          <el-input placeholder="请输入您的工号" v-model="loginData.id" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input placeholder="请输入您的姓名" v-model="loginData.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input placeholder="请输入您的登陆密码" v-model="loginData.password" show-password clearable></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="subFun" class="sub-btn" type="primary" text-align="center">登录</el-button>
        </el-form-item>
      </div>

    </el-form>
  </div>
</template>

<script>
import{reactive} from 'vue'
import { ElMessage } from 'element-plus'
import {login} from '../http/api'
import router from '../router/index.js'
export default {
  name: "Login",
  setup() {
    let loginData=reactive({
      id:'',
      name:'',
      password:''
    })

//let list_class = ["软件201班","软件202班","软件203班","软件204班"];
    let subFun=()=>{
      //先判断账号信息是否已经填写

      if(!loginData.id||!loginData.name||!loginData.password){
        ElMessage.error('请先填写完成您的相关信息哦~亲~');
        return
      }

      if(loginData.id!='2020082328'){
        ElMessage.error('工号错误！请重试！工号都记不住？哈？');
        return
      }

      if(loginData.name!=('荀鹏峻')){
        ElMessage.error('姓名错误！请重试！不是吧，名都记不住啦？');
        return
      }

      if(loginData.password!=('11111')){
        ElMessage.error('密码错误！请重试！喂！小妞！认真点啊！');
        return
      }

//执行登录操作

      login(loginData).then(res=>{
        console.log(res)
        router.push('/visualization')
      })
    }


    return{
      loginData,
      subFun
    }

  },
};
</script>

<style scoped>
.conservator_login{
  width:700px;
  margin:100px auto;
  border:2px solid rgba(131, 82, 3, 0.13);
  border-radius:10px;
  padding:15px;
  background-color: rgba(255, 255, 255, 0.25);
}
h4{
  /*文字大小*/
  font-size:40px;
  /*文本居中*/
  text-align:center;
  /*字体颜色*/
  color: rgb(255, 255, 255, 0.9);

}

.conservator_massge{
  margin:30px 90px 30px 20px;
}

.sub-btn{
  width:100%;
  background-color: rgba(19, 16, 11, 0.36);
}


</style>